<div id="track-edit" style="width: 100%; height: 100%; overflow: auto; white-space: nowrap; text-overflow: ellipsis;" tabindex="-1">
    <div class="p-ml-2 p-my-2" style="font-size: 12px;">轨迹编辑区</div>
    <p-tree [value]="track_line_list" 
        emptyMessage="  "
        [class]="disable()"
        selectionMode="single" [(selection)]="selected_track_line" 
        (onNodeSelect)="onNodeSelect($event)"
        (onNodeUnselect)="onNodeUnselect($event)"
        (onNodeDoubleClick)="onNodeDoubleClick($event)"
        (onNodeContextMenuSelect)="onNodeContextMenuSelect($event)"
        [contextMenu]="context_menu"
        [draggableNodes]="true" [droppableNodes]="true" draggableScope="self" droppableScope="self"
        (onNodeDrop)="onNodeDrop($event)"
        style="width: 100%; height: 100%; padding: 0; font-size: 12px">
        <ng-template let-node pTemplate="track_line">
            <div class="p-d-flex p-ai-center">
                <p-checkbox class="p-ml-1" size="small" [(ngModel)]="node.checked" [binary]="true" />
                <span class="p-ml-2">{{node.label}}</span>
            </div>
        </ng-template>
    </p-tree>
</div>

<p-contextmenu #context_menu [model]="context_menu_items" appendTo="body">
</p-contextmenu>

<p-confirmdialog />

<p-dialog header="轨迹重命名" [modal]="true" [(visible)]="show_rename_track_dialog" [style]="{ width: '40rem' }">
    @if (!!selected_track_line) {
        <div class="p-d-flex p-flex-column">
            <input type="text" pInputText fluid="true" [(ngModel)]="rename_track_name" [invalid]="!rename_track_name" />
            <div class="p-d-flex p-mt-5">
                <p-button class="p-ml-auto" label="取消" severity="secondary" (onClick)="show_rename_track_dialog = false" />
                <p-button class="p-ml-6" label="确定" [disabled]="!rename_track_name"
                    (onClick)="show_rename_track_dialog = false; selected_track_line.label = rename_track_name" />
            </div>
        </div>        
    }
</p-dialog>

<p-dialog header="下载高程数据" [modal]="true" [(visible)]="show_strm_download_dialog" [style]="{ width: '40rem' }">
    @if (!!selected_track_line) {
        <div class="p-d-flex p-flex-column">
            <p-progressBar [value]="strm_download_progress" />
            <div class="p-mt-3">
                {{strm_download_tip}}
            </div>
        </div>        
    }
</p-dialog>

<p-dialog header="轨迹点参数编辑" [modal]="true" [(visible)]="show_track_point_edit_dialog" [style]="{ width: '60rem' }">
    @if (!!selected_track_line && edit_current_point.length > 0) {
        <div #trackpointedit class="p-d-flex p-flex-column" style="font-size: 14px;">
            <div class="p-mt-3">
                轨迹名：{{selected_track_line.label}}
            </div>
            <div class="p-mt-3">
                轨迹点：{{selected_track_line.point_num}} / {{selected_track_line.selected_point}}
            </div>

            <div class="p-grid p-col-12 p-mt-3">
                <div class="p-col-3 p-d-flex p-flex-column">
                    <div style="text-align: center;">
                        前一轨迹点
                    </div>
                </div>
                <div class="p-col-6 p-d-flex p-flex-column">
                    <div style="text-align: center;">
                        当前轨迹点
                    </div>
                </div>
                <div class="p-col-3 p-d-flex p-flex-column">
                    <div style="text-align: center;">
                        后一轨迹点
                    </div>
                </div>
            </div>

            <div class="p-grid p-col-12 p-mt-3">
                <div class="p-col-3">
                    @if (has_prev_point()) {
                        时间：{{transformService.utc2local(selected_track_line.points![selected_track_line.selected_point! - 1][3])}}
                    }
                </div>
                <div class="p-col-6 p-d-flex p-flex-column">
                    <div class="p-d-flex p-ai-center">
                        <span class="p-mr-3">时间：</span>
                        <p-datePicker [(ngModel)]="edit_current_point_time" 
                            dateFormat="yy-mm-dd" [showTime]="true" [showSeconds]="true" hourFormat="24" />
                    </div>
                </div>
                <div class="p-col-3">
                    @if (has_next_point()) {
                        时间：{{transformService.utc2local(selected_track_line.points![selected_track_line.selected_point! + 1][3])}}
                    }
                </div>
            </div>

            <div class="p-grid p-col-12 p-mt-3">
                <div class="p-col-3 p-d-flex p-flex-column">
                    @if (has_prev_point()) {
                        <div>
                            东经：{{selected_track_line.points![selected_track_line.selected_point! - 1][0].toFixed(8)}}
                        </div>
                        <div class="p-mt-5">
                            北纬：{{selected_track_line.points![selected_track_line.selected_point! - 1][1].toFixed(8)}}
                        </div>
                    }
                </div>
                <div class="p-col-6 p-d-flex p-flex-column">
                    <div>
                        东经：{{edit_current_point[0].toFixed(8)}}
                    </div>
                    <div class="p-mt-5">
                        北纬：{{edit_current_point[1].toFixed(8)}}
                    </div>
                </div>
                <div class="p-col-3 p-d-flex p-flex-column">
                    @if (has_next_point()) {
                        <div>
                            东经：{{selected_track_line.points![selected_track_line.selected_point! + 1][0].toFixed(8)}}
                        </div>
                        <div class="p-mt-5">
                            北纬：{{selected_track_line.points![selected_track_line.selected_point! + 1][1].toFixed(8)}}
                        </div>                        
                    }
                </div>
            </div>

            <div class="p-grid p-col-12 p-mt-3">
                <div class="p-col-3">
                    @if (has_prev_point()) {
                        海拔：{{selected_track_line.points![selected_track_line.selected_point! - 1][2].toFixed(2)}}
                    }
                </div>
                <div class="p-col-6 p-d-flex p-flex-column">
                    <div class="p-d-flex p-ai-center">
                        <span>海拔：</span>
                        <p-inputnumber class="p-ml-3" [(ngModel)]="edit_current_point[2]" 
                            size="small" [inputSize]="10" maxFractionDigits="2" showButtons="true" />
                        <p-button class="p-ml-4" label="取两侧海拔平均值" text="true" 
                            (onClick)="compute_current_point_mean_alt()"
                        />
                    </div>
                </div>
                <div class="p-col-3">
                    @if (has_next_point()) {
                        海拔：{{selected_track_line.points![selected_track_line.selected_point! + 1][2].toFixed(2)}}
                    }
                </div>
            </div>

            <div class="p-grid p-col-12 p-mt-3">
                <div class="p-col-3"></div>
                <div class="p-col-6 p-d-flex p-flex-column">
                    <div class="p-d-flex">
                        <p-button label="<==前一点" outlined="true" (onClick)="edit_to_prev_point()" />
                        <p-button class="p-ml-auto" label="后一点==>" outlined="true" (onClick)="edit_to_next_point()" />                        
                    </div>
                    <div class="p-d-flex p-mt-6 p-mb-5">
                        <p-button class="p-ml-auto" label="更新" (onClick)="update_track_line_point()" />
                        <p-button class="p-ml-auto" label="关闭" severity="secondary" (onClick)="show_track_point_edit_dialog = false" />
                    </div>
                </div>
                <div class="p-col-3"></div>
            </div>
            
        </div>
    }
</p-dialog>

